<template>

	<view class="contain">
		<view class="content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="80">
				<!-- 报修人 -->
				<u-form-item label="报修人:" borderBottom ref="item1" required><u--input
						v-model="model1.userInfo.createUserName" border="none"></u--input></u-form-item>
				<!-- 联系方式 -->
				<u-form-item label="联系方式:" prop="userInfo.phone" borderBottom ref="item1" required><u--input
						v-model="model1.userInfo.phone" border="none"></u--input></u-form-item>
				<!-- 报修类型 -->
				<!-- <u-form-item label="报修类型:" prop="userInfo.faultType" borderBottom @click="openAction('报修类型')" ref="item1">
					<u--input v-model="model1.userInfo.faultType" disabled disabledColor="#ffffff" placeholder="请选择报修类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<!-- 受理人 -->
				<u-form-item label="受理人:" prop="userInfo.builderName" borderBottom @click="openAction('受理人')" ref="item1" required>
					<u--input v-model="model1.userInfo.builderName" disabled disabledColor="#ffffff" placeholder="请选择受理人"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="报修内容:" prop="userInfo.content" borderBottom ref="item1" required>
					<u--textarea v-model="model1.userInfo.content" placeholder="请输入报修内容"></u--textarea>
				</u-form-item>
				<u-form-item label="报修时间:" prop="userInfo.createTime" borderBottom @click="showDate = true" ref="item1" required>
					<view class="" ><u--input v-model="model1.userInfo.createTime" disabled
							disabledColor="#ffffff" placeholder="请选择报修时间" border="none"></u--input></view>
				</u-form-item>
				<u-form-item label="上传附件:" borderBottom ref="item1">
					<u-upload :previewFullImage="true" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
				</u-form-item>
			</u--form>
			<button @click="submit" class="btn">提交</button>
			<u-datetime-picker :minDate='minDate' :closeOnClickOverlay='true' :show="showDate" @cancel="showDate = false" @confirm="selectDate"
				v-model="dateTime" mode="datetime"></u-datetime-picker>

			<u-action-sheet :round='10' :show="showSex" :actions="actions" :title="actionTitle" @close="showSex = false"
				@select="Select"></u-action-sheet>

		</view>
		<u-tabbar :value="tabbarIndex" @change="click" :fixed="true" :border="true" activeColor='#1cb8a7'>
			<u-tabbar-item text="申请" icon="edit-pen-fill" @click='clickTabbar'></u-tabbar-item>
			<u-tabbar-item text="列表" icon="file-text-fill" @click='clickTabbar'></u-tabbar-item>

		</u-tabbar>
	</view>
</template>

<script>
	import {
		getOne,
		pageStaff
	} from '@/api/workers.js';
	import {util} from '@/utils/tools.js';
	import {
		save
	} from '@/api/FaultRepair.js';
	export default {
		options: { styleIsolation: 'shared' },//解决/deep/不生效**
		data() {
			return {
				showSex: false,
				minDate:Date.parse(new Date()),
				model1: {
					userInfo: {
						createUserName: this.$util.getUser().username,
						phone: this.$util.getUser().phone,
						// faultType: '',
						builderName: '',
						content: '',
						createTime: '',
						imgs: []
					}
				},
				dateTime:Number(new Date()),
				actions: [{
						name: '设备维修'
					},
					{
						name: '办公用品'
					}
				],
				repairList: [],
				rules: {
					'userInfo.createUserName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					// 'userInfo.faultType': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择报修类型',
					// 	trigger: ['blur', 'change']
					// },
					'userInfo.builderName': {
						type: 'string',
						required: true,
						message: '请选择受理人',
					},
					'userInfo.createTime': {
						type: 'string',
						required: true,
						message: '请选择报修时间',
					},
					'userInfo.content': {
						type: 'string',
						required: true,
						message: '请填写报修内容',
					},
				},
				radio: '',
				switchVal: false,
				actionTitle: '请选择报修类型',
				content: '', //报修内容
				showDate: false, //日期选择
				fileList1: [], //上传图片
				tabbarIndex: 0,
			};
		},
		onLoad() {
			// 受理人角色获取
			this.getOne({
				roleCode: 'worker'
			})
			
		},
		// 
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					uni.showLoading({
						title: "正在提交中...",
						mask: true
					})
					// 成功
					
					this.model1.userInfo.imgs=JSON.stringify(this.fileList1.map(it => it.url));
					
				const {data}=await save(this.model1.userInfo)
				
				if(data.code==0){
					uni.hideLoading()
					uni.$u.toast('申请成功')
					uni.redirectTo({
						url:'list'
					})
				}
				}).catch(errors => {
					uni.hideLoading()
				})
			},
			// 获取受理人
			async getOne(pa) {
				const {
					data
				} = await getOne(pa)
				console.log('打印返回', data)
				this.getPageStaff({
					roleId:data.data.roleId
				})
			},
			async getPageStaff(pa){
				const {
					data
				} = await pageStaff(pa)
				if (data.code == 0) {
					data.data.list.forEach(it => {
						this.repairList.push({
							name: it.userName,
							id: it.userId
						})
					})
				
				}
			},
			
			clickTabbar(e) {
				this.tabbarIndex = e
				console.log('eeeee', e)
				if (this.tabbarIndex == 0) {
					uni.redirectTo({
						url: '/pages/subPack/repair/apply'
					})
				} else if (this.tabbarIndex == 1) {
					uni.redirectTo({
						url: '/pages/subPack/repair/list'
					})
				}
			},
			click() {

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log('选择图片', event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$config.URL + 'api/app/sysFile/v1/save', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {

							resolve(JSON.parse(res.data).url);

						}
					});
				});
			},
			selectDate(d) {
				this.model1.userInfo.createTime =util.timestampToTime(d.value);
				console.log('报修时间',this.model1.userInfo.createTime)
				this.showDate = false;
			},
			
			

			openAction(text) {
				if (text == '报修类型') {
					this.actionTitle = '请选择报修类型';
					this.actions = [{
						name: '设备办公'
					}]

				} else if (text == '受理人') {
					this.actionTitle = '请选择受理人';
					this.actions = this.repairList
				}

				this.showSex = true;
			},
			// 选择
			Select(e) {
				console.log('呃呃呃呃呃呃呃呃呃呃呃呃',e)
				if (this.actionTitle == '请选择报修类型') {
					this.model1.userInfo.type = e.name;
				} else if (this.actionTitle == '请选择受理人') {
					this.model1.userInfo.builderName = e.name;
					this.model1.userInfo.builder=e.id;
				}

				// this.$refs.form1.validateField('userInfo.sex')
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100%;
		background-color: #fff!important;
	}
	
	.content {
		padding: 30rpx 50rpx;
	}

		
	/deep/.u-action-sheet{
		padding-bottom: 60rpx;
	}
	/deep/.uni-input-input {
		text-align: right;
	}

	/deep/.uni-input-placeholder {
		text-align: right;
	}

	/deep/.uni-textarea-placeholder {
		text-align: right;
	}

	/deep/.u-upload {
		align-items: end;
	}

	/deep/.u-button {
		width: 200rpx;
		background-color: $uni-theme-color;
		color: #fff;
		margin-top: 30rpx;
	}

	// 底部
	/deep/.u-tabbar--fixed {
		border-top: 1px solid #dadbde;
	}

	/deep/.u-icon__icon {
		// font-size: 48rpx!important
	}

	/deep/.u-tabbar-item__text {
		font-size: 26rpx
	}
	/deep/.u-form-item__body__right__content__slot{
		justify-content: end;
	}
	/deep/.u-textarea{
		text-align: end;
	}
	
</style>